<template>
<view>
	<qi-navtop></qi-navtop>
	<qi-search></qi-search>
	<view class="catemian">
		<scroll-view scroll-y class="scrollleft">
			<view
				v-for="(item, i) in studata.goodstitle"
				:key="i"
				class="title"
				:class="studata.active === i ? 'active' : ''"
				@tap="Taptitle(i)"
			>
				<text>{{ item.cat_name }}</text>
			</view>
		</scroll-view>
		<scroll-view
			scroll-y
			class="scrollright"
			:scroll-top="studata.scrollTop"
		>
			<view v-for="(item, x) in studata.goodslist" :key="x">
				<view class="goodslist">
					<text>{{ item.cat_name }}</text>
				</view>
				<view class="listx">
					<view
						v-for="(itemx, y) in item.children"
						:key="y"
						class="listitemx"
						@tap="TapteTo(itemx.cat_id)"
					>
						<image :src="itemx.cat_icon"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	
	<qi-tabbar></qi-tabbar>
</view>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from 'vue';
const studata = reactive({
	goodstitle:[],
	goodslist: [],
	active: 0,
	scrollTop: 0
});
const { proxy } = getCurrentInstance();
onMounted(() => {
	proxy.$http({ url: '/categories' }).then(res => {
		if (res.meta.status === 200) {
			studata.goodstitle = res.message;
			studata.goodslist = res.message[0].children;
		}
	});
});
const Taptitle = i => {
	studata.active = i;
	studata.goodslist = studata.goodstitle[i].children;
	studata.scrollTop = studata.scrollTop === 0 ? 1 : 0;
};
const TapteTo = id => {
	console.log(id);
	uni.navigateTo({
		url: '/subpages/goods_list/goods_list?cid=' + id
	});
};
</script>

<style lang="scss" scoped>

.catemian {
	display: flex;
	.scrollleft {
		flex-basis: 100px;
		height: calc(100vh - 150px);
		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f7f7f7;
			line-height: 60px;
			font-size: 12px;
		}
		.active {
			background-color: #ffffff;
			position: relative;
			&::before {
				content: ' ';
				display: block;
				width: 3px;
				height: 30px;
				background-color: pink;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
		}
	}
	.scrollright {
		height: calc(100vh - 150px);
		flex: 1;
		background-color: #ffffff;
		.goodslist {
			display: flex;
			justify-content: center;
			font-size: 12px;
			padding: 10px 0;
		}
		.listx {
			display: flex;
			flex-wrap: wrap;
			image {
				width: 60px;
				height: 60px;
			}
			.listitemx {
				width: 33.33%;
				display: flex;
				justify-content: center;
				padding: 5px;
				box-sizing: border-box;
			}
		}
	}
}
</style>
